<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<table>
            <thead>
                <caption>
                    商品
                </caption>
            </thead>
            <tbody>
                <tr>
                    <td>炸鸡</td>
                    <td>28元</td>
                    <td><button id="zjtaiduola">-</button></td>
                    <td><span id="zjsl">0</span></td>
                    <td><button id="zjtaishaola">+</button></td>
                </tr>
                <tr>
                    <td>可乐</td>
                    <td>5元</td>
                    <td><button id="kltaiduola">-</button></td>
                    <td><span id="klsl">0</span></td>
                    <td><button id="kltaishaola">+</button></td>
                </tr>
                <tr>
                    <td>总价：</td>
                    <td><span id="total">0</span></td>
                </tr>
            </tbody>
        </table>
        
        <script type="text/javascript">
            /**
             * 这题直接写的话还是很简单的，但咱用类写的增加了点难度
             * 我们这里是使用set当作过滤器处理可能为负数的情况，
             * 有两个注意事项，
             * 首先是自增自减不会触发set，需要写成显示的=赋值
             * 其次需要注意不要在set中直接修改该属性，否则会无限次触发set导致爆栈
             * 这里我们通过使用另外的属性进行修改达到了所需效果
             */

            // 补全代码
            const _createShoppingCart = () => {
                const zjtaiduola=document.getElementById('zjtaiduola')
                const zjtaishaola=document.getElementById('zjtaishaola')
                const kltaiduola=document.getElementById('kltaiduola')
                const kltaishaola=document.getElementById('kltaishaola')
                const zjsl=document.getElementById('zjsl')
            }
            class ShoppingCart {
                constructor() {
                    this._zjsl=0
                    this._klsl=0
                    this._total=0
                }

                // 属性设置器（过滤条件）
                set zjsl(value){
                    this._zjsl=(value<0)?0:value;
                }

                set klsl(value){
                    this._klsl=(value<0)?0:value;
                }
                set total(value){
                    this._total=(value<0)?0:value;
                }
                
                //炸鸡减少
                zjtaiduola(){
                    this.zjsl=this._zjsl-1;
                    this.updateView();
               }

               //炸鸡增加
               zjtaishaola(){
                    this.zjsl=this._zjsl+1;
                    this.updateView();
               }

               //可乐减少
               kltaiduola(){
                    this.klsl=this._klsl-1;
                    this.updateView();
               }

               //可乐增加
               kltaishaola(){
                    this.klsl=this._klsl+1;
                    this.updateView();
               }

               //更新视图
               updateView(){
                this._total=this._zjsl*28+this._klsl*5;
                klsl.innerHTML=this._klsl;
                total.innerHTML=this._total;
                zjsl.innerHTML=this._zjsl;
               }
            }

            //绑定点击事件
            let shoppingCart=new ShoppingCart()
            zjtaiduola.onclick=()=>{
                shoppingCart.zjtaiduola()
            }
            zjtaishaola.onclick=()=>{
                shoppingCart.zjtaishaola()
            }
            kltaiduola.onclick=()=>{
                shoppingCart.kltaiduola()
            }
            kltaishaola.onclick=()=>{
                shoppingCart.kltaishaola()
            }
        </script>
    </body>
</html>